為什麼要簡化媒體查詢？

在開發響應式網站時，我們經常需要針對不同設備設置媒體查詢（Media Queries）。但隨著設計複雜度的增加，CSS 文件可能會變得很冗長，重複的媒體查詢也會讓代碼難以維護。

Sass 提供了一些工具來簡化這個過程，使得我們可以更方便地管理響應式設計，讓代碼更加乾淨、易讀。

基本媒體查詢

首先，這是傳統的 CSS 中使用媒體查詢的方式：

.element {
  width: 100%;
  background-color: red;
}

@media (min-width: 768px) {
  .element {
    width: 50%;
    background-color: blue;
  }
}

這種寫法隨著項目的規模增長會變得很混亂。如果每個元素都要這麼寫，CSS 文件會很快變得難以維護。

Sass 的嵌套媒體查詢

Sass 允許我們將媒體查詢嵌套在相應的選擇器內部，使代碼更加直觀、易讀。

.element {
  width: 100%;
  background-color: red;

  @media (min-width: 768px) {
    width: 50%;
    background-color: blue;
  }
}

這樣做的好處是，相關樣式都放在了一起，不需要分開管理，從而讓代碼結構更加清晰。

使用 Sass 變數來管理斷點

我們可以使用 Sass 變數來統一管理所有的斷點，這樣如果設計規範中的斷點改變，我們只需在一個地方進行修改。

$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;

.element {
  width: 100%;
  
  @media (min-width: $breakpoint-tablet) {
    width: 75%;
  }

  @media (min-width: $breakpoint-desktop) {
    width: 50%;
  }
}

這種方法能夠提高靈活性，當我們需要調整某個斷點時，只需修改變數的值即可。

Mixin 簡化媒體查詢的使用

Mixin 是 Sass 的一個強大功能，它可以讓我們定義一個可重複使用的樣式片段。在響應式設計中，我們可以使用 Mixin 來進一步簡化媒體查詢。

@mixin respond-to($breakpoint) {
  @if $breakpoint == tablet {
    @media (min-width: 768px) { @content; }
  }
  @else if $breakpoint == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

.element {
  width: 100%;

  @include respond-to(tablet) {
    width: 75%;
  }

  @include respond-to(desktop) {
    width: 50%;
  }
}

通過這種方式，我們只需定義一次媒體查詢邏輯，然後在不同的元素上多次重複使用，代碼看起來也更加乾淨整潔。

總結

使用 Sass 來簡化媒體查詢能夠大幅提高代碼的可讀性和可維護性。通過嵌套、變數和 Mixin，我們可以輕鬆管理不同的響應式設計需求，避免重複的媒體查詢並保持代碼乾淨、易懂。